import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { removeUser } from '../../stores/UserSlice'
import './PreferencesAndTaboos.css'

export default function PreferencesAndTaboos(props) {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const removeHandler = (id) => {
    if (window.confirm('确定要删除该用户吗？')) {
      dispatch(removeUser(id))
    }
  }

  return (
    <div className="preferences-container">
      <div className="header">
        <div className="title">重要客户的喜好和禁忌</div>
        <div className="actions">
          {props.userData.length > 0 && (
            <div className="count">
              已添加<span>{props.userData.length}</span>人
            </div>
          )}
          <div className="add-btn" onClick={() => navigate('/preAndTabEdit')}>
            添加
          </div>
        </div>
      </div>

      <div>
        {props.userData.map((item, index) => (
          <div className="user-card" key={index}>
            <div className="user-header">
              <div className="user-name">{item.username}</div>
              <div className="user-sex">({item.sex})</div>
            </div>
            
            {item.work && (
              <div className="user-detail">
                <strong>工作职位：</strong>{item.work}
              </div>
            )}
            
            {item.phone && (
              <div className="user-detail">
                <strong>联系方式：</strong>{item.phone}
              </div>
            )}
            
            <div className="user-detail">
              <strong>用车：</strong>{item.car === '有' ? item.carDetail : '无'}
            </div>
            
            <div className="user-detail">
              <strong>用餐：</strong>{item.dinner === '有' ? item.dinnerDetail : '无'}
            </div>
            
            <div className="user-detail">
              <strong>住宿：</strong>{item.home === '有' ? item.homeDetail : '无'}
            </div>
            
            <div className="user-detail">
              <strong>备注：</strong>{item.vote || "无"}
            </div>
            
            <div className="actions">
              <button 
                className="action-btn delete-btn" 
                onClick={() => removeHandler(item.id)}
              >
                删除
              </button>
              <button className="action-btn edit-btn">
                编辑
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}